<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #resource-sniffer-panel {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 999999;
    }

    #resource-sniffer-toggle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: #1a73e8;
      color: white;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    #resource-sniffer-toggle:hover {
      background-color: #1557b0;
      transform: scale(1.1);
    }

    #resource-sniffer-toggle svg {
      width: 24px;
      height: 24px;
    }

    #resource-sniffer-iframe {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 320px;
      height: 480px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: none;
      border: none;
    }

    #resource-sniffer-iframe.show {
      display: block;
      animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div id="resource-sniffer-panel">
    <button id="resource-sniffer-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3"/>
        <path d="M3 12h6M15 12h6M12 3v6M12 15v6"/>
      </svg>
    </button>
    <iframe id="resource-sniffer-iframe" src="popup.html"></iframe>
  </div>
  <script>
    const toggle = document.getElementById('resource-sniffer-toggle');
    const iframe = document.getElementById('resource-sniffer-iframe');
    let isOpen = false;

    toggle.addEventListener('click', () => {
      isOpen = !isOpen;
      if (isOpen) {
        iframe.classList.add('show');
      } else {
        iframe.classList.remove('show');
      }
    });
  </script>
</body>
</html>